<template>
  <el-dialog
    :visible.sync="isShow"
    width="30%"
    class="workDialog"
    fullscreen
    center
  >
    <div class="box">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="form"
      >
        <el-form-item label="学科:" prop="subject">
          <el-select
            v-model="form.subject"
            placeholder="请选择学科"
            class="w700"
          >
            <el-option
              v-for="(item, index) in subjectlist"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="阶段:" prop="step">
          <el-select v-model="form.step" placeholder="请选择" class="w700">
            <el-option
              v-for="(value, key, index) in stepObj"
              :key="index"
              :label="value"
              :value="+key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业:" prop="enterprise">
          <el-select
            v-model="form.enterprise"
            placeholder="请选择企业"
            class="w700"
          >
            <el-option
              v-for="(item, index) in companylist"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市:" prop="city">
          <el-cascader
            size="large"
            :options="options"
            v-model="form.city"
            :props="{ label: 'label', value: 'label' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <!-- <el-col :offset="2"> -->
        <el-form-item label="题型:" prop="type">
          <el-radio-group v-model="form.type" class="w700">
            <el-radio
              v-for="(value, key, index) in typeObj"
              :key="index"
              :label="+key"
              >{{ value }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="form.difficulty" class="w700">
            <el-radio
              v-for="(value, key, index) in difficultyObj"
              :key="index"
              :label="+key"
              >{{ value }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <hr />
        <el-form-item label="试题标题" prop="title" class="qu">
          <quillEditor
            v-model="form.title"
            @change="quillchange('title')"
          ></quillEditor>
        </el-form-item>
        <hr />
        <el-form-item :label="typeObj[form.type]" :prop="propObj[form.type]">
          <itemall :form="form" @quillchange="quillchange"></itemall>
        </el-form-item>
        <hr />
        <el-form-item label="解析视频">
          <upload type="video" v-model="video"></upload>
          <p>只能上传视频格式文件</p>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer_analyze" class="qu">
          <quillEditor
            v-model="form.answer_analyze"
            @change="quillchange('answer_analyze')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="试题备注" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.remark"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="title" class="header">
      <span>新增题库测试</span>
      <span class="close el-icon-close" @click="isShow = false"></span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import itemall from "@/components/itemall.vue";
import upload from "@/components/ph_upload.vue";
import { regionData } from "element-china-area-data";
import { addquestion, editquestion } from "@/api/worklist.js";
export default {
  components: {
    quillEditor,
    itemall,
    upload,
  },
  props: [
    "companylist",
    "subjectlist",
    "difficultyObj",
    "typeObj",
    "stepObj",
    "type",
  ],
  watch: {
    isShow(newValue) {
      if (!newValue) {
        this.form = {
          title: "", //	是	string	标题
          subject: "", //	是	int	学科id标识
          step: "", //	是	int	阶段1、初级 2、中级 3、高级
          enterprise: "", //	是	int	企业id标识
          city: [], //	是	array	[省、市、区县]
          type: 1, //	是	string	题型 1单选 、2多选 、3简答
          difficulty: 1, //	是	int	题目难度 1简单 、2一般 、3困难
          single_select_answer: "", //	是	string	单选题答案
          multiple_select_answer: [], //	是	array	多选题答案
          short_answer: "", //	是	string	简答题答案
          video: "", //	否	string	解析视频地址
          answer_analyze: "", //	是	string	答案解析
          remark: "", //	是	string	答案备注
          select_options: [
            {
              label: "A",
              text: "",
              image: "",
            },
            {
              label: "B",
              text: "",
              image: "",
            },
            {
              label: "C",
              text: "",
              image: "",
            },
            {
              label: "D",
              text: "",
              image: "",
            },
          ], //	是	array	选项，介绍，图片介绍:"",//
        };
        this.$refs.form.resetFields();
      }
    },
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      isShow: false,
      url: "",
      video: "",
      propObj: {
        1: "single_select_answer",
        2: "multiple_select_answer",
        3: "short_answer",
      },
      form: {
        title: "", //	是	string	标题
        subject: "", //	是	int	学科id标识
        step: "", //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: "", //	是	int	企业id标识
        city: [], //	是	array	[省、市、区县]
        type: 1, //	是	string	题型 1单选 、2多选 、3简答
        difficulty: 1, //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: "", //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: "", //	是	string	简答题答案
        video: "", //	否	string	解析视频地址
        answer_analyze: "", //	是	string	答案解析
        remark: "", //	是	string	答案备注
        select_options: [
          {
            label: "A",
            text: "",
            image: "",
          },
          {
            label: "B",
            text: "",
            image: "",
          },
          {
            label: "C",
            text: "",
            image: "",
          },
          {
            label: "D",
            text: "",
            image: "",
          },
        ], //	是	array	选项，介绍，图片介绍:"",//
      },
      rules: {
        title: [{ required: true, message: "必填", trigger: "change" }],
        subject: [{ required: true, message: "必填", trigger: "change" }],
        step: [
          {
            type: "number",
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "number",
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        difficulty: [
          {
            type: "number",
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        enterprise: [{ required: true, message: "必填", trigger: "change" }],
        city: [
          { type: "array", required: true, message: "必填", trigger: "change" },
        ],
        single_select_answer: [
          { required: true, message: "必填", trigger: "change" },
        ],
        multiple_select_answer: [
          { required: true, message: "必填", trigger: "change" },
        ],
        short_answer: [{ required: true, message: "必填", trigger: "change" }],
        answer_analyze: [
          { required: true, message: "必填", trigger: "change" },
        ],
        remark: [{ required: true, message: "必填", trigger: "change" }],
      },
    };
  },
  methods: {
    //城市
    handleChange(value) {
      console.log(value);
      console.log(this.selectedOptions);
      console.log(this.form.city);
      console.log(this.options);
    },
    //富文本检验
    quillchange(data) {
      console.log(this.form.title);
      this.$refs.form.validateField([data]);
    },
    //关闭弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 增加/编辑题目框提交
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.type == "edit") {
            editquestion(this.form)
              .then(() => {
                this.isShow = false;
                this.$message.success("题目编辑成功");
                this.$emit("getData");
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else {
            addquestion(this.form)
              .then(() => {
                this.isShow = false;
                this.$message.success("题目增加成功");
                this.$emit("getData");
              })
              .catch((err) => {
                this.$message.error(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less">
.workDialog {
  width: 100%;
  hr {
    margin-bottom: 30px;
  }
  .form {
    margin: 0 auto;
    // text-align: center;
    width: 900px;
    .w700 {
      width: 500px;
    }
  }
  .box {
    width: 700px;
    margin: 0 auto;
  }
  .header {
    width: 100%;
    height: 53px;
    background: linear-gradient(to right, #01c5fa, #1394fa);
    line-height: 53px;
    font-size: 14px;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
    letter-spacing: 0px;
    span {
      padding-left: 20px;
    }
    .close {
      float: right;
      padding: 20px 20px 0 0;
    }
  }
  .qu {
    // overflow: hidden;
    .el-form-item__content {
      margin-top: 70px;
      width: 900px;
      transform: translateX(-100px);
    }
  }
}
</style>
